<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="icon" href="https://www.xmind.cn/webapp-icon/icon_48.png">
    <meta name="keywords" content="xmind,思维导图,xmind官网,思维导图软件,效率工具,头脑风暴,脑图,心智图">
    <meta name="description" content="XMind是一个全功能的思维导图和头脑风暴软件，为激发灵感和创意而生。「XMind思维导图」中文官方网站提供XMind思维导图软件免费下载，产品介绍，购买。XMind (2022)、XMind 8、XMind移动版支持Windows，Mac(macOS)、Linux、iOS和Android(安卓)完整覆盖电脑端移动端各操作系统。">
    <title>Ximd注册页</title>
    <style>
        .big{
            /* 宽度 */
            width: 1170px;
            /* 高度 */
            height: 835px;
            /* 背景颜色 */
            /* background: red; */
            /* 设置左右外边距为自动 */
            margin: 0 auto;
        }
        .big h1{
            width: 1140px;
            padding: 15px;
        }
        .beirong{
            width: 1140px;
            /* height: 623px; */
            /* background: palegoldenrod; */
            margin: 0 auto;
        }
        .left{
            width: 442px;
            /* height: 523px; */
            /* background: blanchedalmond; */
            /* 设置左浮动 */
            float: left;
        }
        .right{
            /* width: 700px; */
            /* height: 595px; */
            /* background: palevioletred; */
            /* 设置右浮动 */
            float: right;
        }
        .left form input{
            width: 406px;
            height: 56px;
            padding: 0;
            /* 设置下外边距 */
            margin-bottom: 46px;
            /* 设置内边距 00*/
            padding: 0px 16px;
            /* 设置文字大小 */
            font-size: 20px;
            /* 设置边框线 */
            border: 2px solid rgb(133, 129, 129);
            /* 设置圆角边框 */
            border-radius: .25rem;
        }
        #youxiang{

        }
        #querenyouxiang{

        }
        #shouji{

        }
        #mima{
            margin-bottom: 20px;
        }
        form div{
            height: 30px;
            /* 设置行高 */
            line-height: 30px;
        }
        #tongyi{
            width: 18px;
            height: 18px;
            /* 设置内边距 */
            padding: 0;
            /* 设置外边距 */
            margin: 0;
            margin-right: 5px;
            vertical-align: middle;
        }
        #dingyue{
            width: 18px;
            height: 18px;
            padding: 0;
            margin: 0;
            margin-right: 5px;
            /* 设置文字相对居中对齐 */
            vertical-align: middle;
        }
        #zhuce{
            background: red;
            /* 设置字体颜色 */
            color: white;
            /* 设置边框线 */
            border: 2px solid red;
            margin-top: 20px;
            width: 440px;
            /* 设置鼠标移动手指形状 */
            cursor: pointer;
        }
        .hidden{
            margin: -46px 0 16px 0;
            color: red;
            display: none;
        }
    </style>
</head>
<body>
    <div class="big">
        <h1>注册 XMind 帐号</h1>
        <div class="beirong">
            <div class="left">
                <form action="">
                    <input type="email" name="youxiang" id="youxiang" placeholder="邮箱">
                    <div class="hidden youxiang"><span>该字段不能为空</span></div>
                    <input type="email" name="querenyouxiang" id="querenyouxiang" placeholder="确认邮箱">
                    <div class="hidden querenyouxiang"><span>该字段不能为空</span></div>
                    <input type="tel" name="shouji" id="shouji" placeholder="手机">
                    <div class="hidden shouji"><span>该字段不能为空</span></div>
                    <input type="password" name="mima" id="mima" placeholder="密码">
                    <div class="hidden mima"><span>该字段不能为空</span></div>
                    <div>
                        <input type="checkbox" name="tongyi" id="tongyi">我已阅读<a href="">服务条款</a>及<a href="">隐私政策</a>.
                    </div>
                    <div>
                        <input type="checkbox" name="dingyue" id="dingyue">订阅 XMind 使用技巧和新动态
                    </div>
                    <input type="submit" value="注册" id="zhuce">
                </form>
            </div>
            <div class="right">
                <img src="https://s3.cn-north-1.amazonaws.com.cn/assets.xmind.cn/www/assets/images/signin/sign-create-51d05d4641.png" alt="">
            </div>
        </div>
    </div>
</body>
<script src="https://www.jq22.com/jquery/jquery-3.3.1.js"></script>
<script>
// 获取注册按钮
$button = $('#zhuce');

// $button.click(function(){

// })

// 触发点击事件
$button.click(function(){

    // 获取邮箱里面的内容
    $youxiang = $('#youxiang').val();
    // alert($youxiang)
    console.log($youxiang);
    // 获取确认邮箱的内容
    $querenyouxiang = $('#querenyouxiang').val();
    console.log($querenyouxiang);
    // 获取手机的内容  
    $shouji = $('#shouji').val();
    console.log($shouji);
    // 获取密码的内容
    $mima = $('#mima').val();
    console.log($mima);

    if($youxiang == ''){
        // alert('邮箱不能为空！');
        $('.youxiang').css('display','block');
        return false;

    }

    if($querenyouxiang == ''){
        // alert('邮箱确认不能为空！');
        $('.querenyouxiang').css('display','block');
        return false;

    }

    if($querenyouxiang != $youxiang){
        // alert('输入的两次邮箱必须一致！');
        $('.querenyouxiang').css('display','block');
        return false;

    }

    if($shouji == ''){
        // alert('手机不能为空！');
        $('.shouji').css('display','block');
        return false;

    }

    if($mima == ''){
        // alert('密码不能为空！');
        $('.mima').css('display','block');
        return false;

    }else{
        $('.mima').css('display','none');
    }

    
    if($('#tongyi').is(':checked') == false){
        alert('请同意协议！');
        return false;
    }

    if($('#dingyue').is(':checked') == false){
        alert('请进行订阅！');
        return false;
    }

    alert('注册成功！');
})
</script>
</html>